<template>
	<view class="content">
		<view class="order-info">
			<text class="txt1">产品信息</text>
			<view class="txt2">
				<text class="txt2-1">产品名称</text>
				<text class="txt2-2">{{productInfo.productName}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">销售价</text>
				<text class="txt2-2">{{productInfo.price+"\t元"}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">成本价</text>
				<text class="txt2-2">{{productInfo.costPrice+"\t元"}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">供应商</text>
				<text class="txt2-2">{{productInfo.supplierName}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">折算量</text>
				<!-- <text class="txt2-2">{{productInfo.forCarNum+"\t次"}}</text> -->
				<up-number-box :min="1" :max="100" v-model="smallNumValue" @change="valChange"
					iconStyle="color: #fff"></up-number-box>
				<text class="txt2-2" style="margin-left: 5rpx;">次</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">在架上</text>
				<text class="txt2-2">{{productInfo.isActive?"是":"已下架"}}</text>
			</view>

		</view>

		<view class="btn" @click="update_onclick">
			确认修改
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		api_product_infoById,
		api_supplier_list,
		api_product_getByBarCode,
		api_product_adminReduceStorage
	} from "../../../../apis/apis.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"


	const productInfo = ref({}); //产品信息
	const smallNumValue = ref(0);
	const barCode = ref("");



	onLoad(async (e) => {
		barCode.value = e.barCode;
		//查产品信息
		try {
			let res = await api_product_getByBarCode({
				barCode: e.barCode
			});
			productInfo.value = res.data;
			smallNumValue.value = productInfo.value.smallNum;
		} catch (e) {
			uni.showToast({
				title: "失败",
				icon: "error"
			});
		}
	});


	//修改smallnum
	const update_onclick = () => {
		uni.showModal({
			title: "确认修改？",
			success: async (res) => {
				if (res.confirm) {
					try {
						let res = await api_product_adminReduceStorage({
							id: productInfo.value.id,
							smallNum: smallNumValue.value,
							productCode: barCode.value
						});
						
					} catch (e) {
						uni.showToast({
							title: "失败",
							icon: "error"
						});
					}
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 100vh;
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);

		.order-info {
			// background-color: $main-background-color;
			width: 700rpx;
			display: flex;
			flex-direction: column;
			align-items: left;
			gap: 20rpx;
			margin-top: 20rpx;

			.txt1 {
				font-family: Alibaba_PuHuiTi_Medium;
				font-weight: 500;
				font-size: 34rpx;
				color: $font-primary-color;
			}

			.txt2 {
				display: flex;
				align-items: center;
				width: 100%;

				.txt2-1 {
					width: 160rpx;
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-primary-color;
					margin-right: 30rpx;
				}

				.txt2-2 {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 36rpx;
					color: $font-sub-color;
				}

				.add {
					height: 46rpx;
					padding: 0 8rpx;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 75rpx;
			background: $primary-color;
			border-radius: 100rpx;
			border: none;
			color: white;
			font-weight: 300;
			font-size: 36rpx;
			font-family: Alibaba_PuHuiTi_Light;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 5rpx;
		}
	}
</style>